import { useRoute } from "vue-router";
import { ref, watch, onMounted } from "vue";

import { searchProduct, searchTip } from "@/api/product.js";

export const useData = () => {
  let brandList = ref([]);
  let categoryList = ref([]);
  let productList = ref([]);

  let total = ref(0);
  /**
   * @description: 拖拽滚动
   * @param {Array} eleList
   * @return {*}
   */
  const dragScroll = (eleList: Array<HTMLDivElement>) => {
    eleList.forEach((scrollContainer) => {
      let isDragging = false;
      let startPosition = 0;
      let scrollLeft = 0;
      let lastScrollPos = 0; // 上一次的滚动位置
      let velocity = 0; // 速度
      let damping = 0.8; // 阻尼因子，值越小阻尼效果越明显

      scrollContainer.addEventListener("mousedown", (e) => {
        isDragging = true;
        startPosition = e.clientX - scrollContainer.offsetLeft;
        scrollLeft = scrollContainer.scrollLeft;
        lastScrollPos = scrollLeft; // 初始化最后滚动位置
        velocity = 0; // 重置速度
      });

      scrollContainer.addEventListener("mousemove", (e) => {
        if (!isDragging) return;
        const newScrollLeft = e.clientX - scrollContainer.offsetLeft;
        const scrollDistance = newScrollLeft - startPosition;
        scrollContainer.scrollLeft = scrollLeft - scrollDistance;

        // 计算速度
        velocity = scrollContainer.scrollLeft - lastScrollPos;
        lastScrollPos = scrollContainer.scrollLeft; // 更新最后滚动位置
      });

      // 使用 requestAnimationFrame 实现阻尼效果
      function applyDamping() {
        if (Math.abs(velocity) > 0.1) {
          // 当速度大于阈值时
          scrollContainer.scrollLeft += velocity; // 按照当前速度滚动
          velocity *= damping; // 应用阻尼
          requestAnimationFrame(applyDamping); // 继续调用
        }
      }

      scrollContainer.addEventListener("mouseup", () => {
        isDragging = false;
        applyDamping(); // 开始应用阻尼
      });

      scrollContainer.addEventListener("mouseleave", () => {
        isDragging = false;
        applyDamping(); // 开始应用阻尼
      });

      // 添加鼠标滚轮事件处理
      scrollContainer.addEventListener(
        "wheel",
        (e) => {
          e.preventDefault(); // 阻止默认的滚动行为
          const scrollAmount = e.deltaY; // 获取滚动的增量
          scrollContainer.scrollLeft += scrollAmount; // 水平方向滚动
        },
        { passive: false }
      );
    });
  };

  /**
   * @description: 获取搜索提示
   * @param {*} data
   * @return {*}
   */
  const getSearchTip = (data) => {
    searchTip(data).then((res) => {
      if (res.err.code == 0) {
        brandList.value = res.result.BrandList;
        categoryList.value = res.result.CategoryList;
      }
    });
  };

  /**
   * @description: 获取商品列表
   * @param {*} data
   * @return {*}
   */
  const getProductList = (data) => {
    searchProduct(data).then((res) => {
      if (res.err.code == 0) {
        productList.value = res.result?.data;
        total.value = res.result?.total;
      }
    });
  };

  const handlePageChange = (pageNum) => {
    console.log(pageNum)
    getProductList({
     ...route.query,
      page:pageNum,
    });
  };

  // 监听路由变化
  let route = useRoute();
  watch(
    () => route.query,
    (newSearchData, oldSearchData) => {
      getSearchTip(newSearchData)
      getProductList(newSearchData)
    },
    { immediate: true, deep: true }
  );

  return {
    route,
    total,
    productList,
    brandList,
    categoryList,
    dragScroll,
    handlePageChange,
  };
};
